<template>
    <div>
        <div style="display: flex;justify-content: space-between;">
            <el-button icon="el-icon-plus" type="primary" @click="showAddSalaryView">添加员工套账</el-button>
            <el-button icon="el-icon-refresh" @click="initSalary"></el-button>
            <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                    width="50%">
                <div style="display: flex;justify-content: space-around;align-items: center;">
                    <el-steps direction="vertical" :active="activeItemIndex">
                        <el-step v-for="(itemName ,index) in salaryItemName" :key="index" :title="itemName"></el-step>
                    </el-steps>
                    <el-input style="width: 200px;"
                              v-show="activeItemIndex==index"
                              v-model="salary[title]"
                              :key="index" :placeholder="'请输入'+salaryItemName[index]"
                              v-for="(value,title,index) in salary"></el-input>
                </div>               <!--值 key index-->
                <span slot="footer" class="dialog-footer">
    <el-button @click="preStep">{{activeItemIndex == 10?'取消':'上一步'}}</el-button>
    <el-button type="primary" @click="nextStep">{{activeItemIndex == 10?'完成':'下一步'}}</el-button>
  </span>
            </el-dialog>
        </div>
        <div style="margin-top: 10px;">
            <el-table :data="salarys" border stripe>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column width="120" prop="name" label="账套名称"></el-table-column>
                <el-table-column width="80" prop="basicsalary" label="基本工资"></el-table-column>
                <el-table-column width="80" prop="trafficsalary" label="交通补助"></el-table-column>
                <el-table-column width="80" prop="lunchsalary" label="午餐补助"></el-table-column>
                <el-table-column width="70" prop="bonus" label="奖金"></el-table-column>
                <el-table-column width="120" prop="createdate" label="启用时间"></el-table-column>
                <el-table-column label="养老金" align="center">
                    <el-table-column width="70" prop="pensionper" label="比率"></el-table-column>
                    <el-table-column width="70" prop="pensionbase" label="基数"></el-table-column>
                </el-table-column>
                <el-table-column label="医疗保险" align="center">
                    <el-table-column width="70" prop="medicalper" label="比率"></el-table-column>
                    <el-table-column width="70" prop="medicalbase" label="基数"></el-table-column>
                </el-table-column>
                <el-table-column label="公积金" align="center">
                    <el-table-column width="70" prop="accumulationfundper" label="比率"></el-table-column>
                    <el-table-column width="70" prop="accumulationfundbase" label="基数"></el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" @click="showEditSalaryView(scope.row)">编辑</el-button>
                        <el-button size="small" @click="deleteSalary(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SalSob",
        data() {
            return {
                dialogTitle:'添加工资账套',
                dialogVisible: false,
                salarys: [],
                salary: {
                    basicsalary: 0,
                    trafficsalary: 0,
                    lunchsalary: 0,
                    bonus: 0,
                    pensionper: 0,
                    pensionbase: 0,
                    medicalper: 0,
                    medicalbase: 0,
                    accumulationfundper: 0,
                    accumulationfundbase: 0,
                    name:''
                },
                activeItemIndex: 0,
                salaryItemName: ['基本工资', '交通补助', '午餐补助', '奖金', '养老金比率', '养老金基数', '医疗保险比率',
                    '医疗保险基数', '公积金比率', '公积金基数','账套名称'],
            }
        },
        mounted() {
            this.initSalary();
        },
        methods: {
            deleteSalary(data){
                this.$confirm('此操作将永久删除【'+data.name+'】套账, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/salary/sob/"+data.id).then(resp=>{
                        if (resp){
                            this.initSalary();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            preStep() {
                if (this.activeItemIndex === 0) {
                    return;
                } else if (this.activeItemIndex === 10) {
                    //数据初始化
                    this.dialogVisible = false;
                    return;
                }
                this.activeItemIndex--;
                //
            },
            nextStep() {
                if (this.activeItemIndex === 10) {
                    if (this.salary.id){
                        this.putRequest("/salary/sob/", this.salary).then(resp=>{
                            if (resp) {
                                this.initSalary();
                                this.dialogVisible = false;
                            }
                        });
                    } else {
                        this.postRequest("/salary/sob/", this.salary).then(resp => {
                            if (resp) {
                                this.initSalary();
                                this.dialogVisible = false;
                            }
                        });
                    }
                    return;
                }
                this.activeItemIndex++
            },
            initSalary() {
                this.getRequest("/salary/sob/").then(resp => {
                    if (resp) {
                        this.salarys = resp;
                    }
                })
            },
            showEditSalaryView(data){
                this.dialogTitle='编辑工资账套';
                this.dialogVisible = true;
                this.salary.basicsalary = data.basicsalary;
                this.salary.trafficsalary = data.trafficsalary;
                this.salary.lunchsalary = data.lunchsalary;
                this.salary.bonus = data.bonus;
                this.salary.pensionper = data.pensionper;
                this.salary.pensionbase = data.pensionbase;
                this.salary.medicalper = data.medicalper;
                this.salary.medicalbase = data.medicalbase;
                this.salary.accumulationfundper = data.accumulationfundper;
                this.salary.accumulationfundbase = data.accumulationfundbase;
                this.salary.name = data.name;
                this.salary.id = data.id;
            },
            showAddSalaryView() {
                this.salary = {
                    basicsalary: 0,
                    trafficsalary: 0,
                    lunchsalary: 0,
                    bonus: 0,
                    pensionper: 0,
                    pensionbase: 0,
                    medicalper: 0,
                    medicalbase: 0,
                    accumulationfundper: 0,
                    accumulationfundbase: 0,
                    name:''
                };
                this.activeItemIndex = 0;
                this.dialogTitle='添加工资账套';
                this.dialogVisible = true;
            },
        }
    }
</script>

<style scoped>

</style>